<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>承运商管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 900px;
            max-width: 95%;
            min-height: 600px;
            display: flex;
        }

        .sidebar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 30px;
            width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .sidebar h1 {
            font-size: 28px;
            margin-bottom: 20px;
            text-align: center;
        }

        .sidebar p {
            font-size: 14px;
            line-height: 1.6;
            opacity: 0.9;
            text-align: center;
        }

        .main-content {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid #f0f0f0;
        }

        .tab {
            padding: 15px 20px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 15px;
            color: #666;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
        }

        .tab.active {
            color: #667eea;
            border-bottom-color: #667eea;
            font-weight: bold;
        }

        .tab:hover {
            color: #667eea;
        }

        .form-container {
            display: none;
        }

        .form-container.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .message {
            padding: 12px 15px;
            border-radius: 8px;
            margin-top: 20px;
            display: none;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }

        .loading.active {
            display: block;
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .result-container {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .result-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .result-list {
            list-style-type: none;
        }

        .result-item {
            padding: 8px 12px;
            margin-bottom: 5px;
            background: white;
            border-radius: 4px;
            border: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h1>🚚 承运商管理</h1>
            <p>基于区块链技术的现代化承运商管理系统，确保数据安全、透明、不可篡改。</p>
        </div>

        <div class="main-content">
            <div class="tabs">
                <button class="tab active" onclick="switchTab('register')">承运商注册</button>
                <button class="tab" onclick="switchTab('verify')">承运商验证</button>
                <button class="tab" onclick="switchTab('shipments')">查询物流信息</button>
            </div>

            <!-- 承运商注册表单 -->
            <div id="register-form" class="form-container active">
                <form onsubmit="registerCarrier(event)">
                    <div class="form-group">
                        <label for="carrierName">承运商名称</label>
                        <input type="text" id="carrierName" name="carrierName" required placeholder="请输入承运商名称">
                    </div>
                    <div class="form-group">
                        <label for="carrierInfo">承运商信息</label>
                        <textarea id="carrierInfo" name="carrierInfo" required placeholder="请输入承运商详细信息"></textarea>
                    </div>
                    <button type="submit" class="btn">注册承运商</button>
                </form>
                <div id="register-message" class="message"></div>
                <div id="register-loading" class="loading">
                    <div class="spinner"></div>
                    <p>正在注册承运商...</p>
                </div>
            </div>

            <!-- 承运商验证表单 -->
            <div id="verify-form" class="form-container">
                <form onsubmit="verifyCarrier(event)">
                    <div class="form-group">
                        <label for="carrierId">承运商ID</label>
                        <input type="number" id="carrierId" name="carrierId" required placeholder="请输入承运商ID">
                    </div>
                    <button type="submit" class="btn">验证承运商</button>
                </form>
                <div id="verify-message" class="message"></div>
                <div id="verify-loading" class="loading">
                    <div class="spinner"></div>
                    <p>正在验证承运商...</p>
                </div>
            </div>

            <!-- 查询物流信息表单 -->
            <div id="shipments-form" class="form-container">
                <form onsubmit="getShipments(event)">
                    <div class="form-group">
                        <label for="shipmentCarrierId">承运商ID</label>
                        <input type="number" id="shipmentCarrierId" name="shipmentCarrierId" required placeholder="请输入承运商ID">
                    </div>
                    <button type="submit" class="btn">查询物流信息</button>
                </form>
                <div id="shipments-message" class="message"></div>
                <div id="shipments-loading" class="loading">
                    <div class="spinner"></div>
                    <p>正在查询物流信息...</p>
                </div>
                <div id="shipments-result" class="result-container" style="display: none;"></div>
            </div>
        </div>
    </div>

    <script>
        // API基础URL - 根据实际部署情况修改
        const API_BASE_URL = 'http://localhost:8080';

        // 切换标签页
        function switchTab(tabName) {
            // 移除所有active类
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            document.querySelectorAll('.form-container').forEach(form => form.classList.remove('active'));
            
            // 添加active类到当前标签
            if (tabName === 'register') {
                document.querySelectorAll('.tab')[0].classList.add('active');
                document.getElementById('register-form').classList.add('active');
            } else if (tabName === 'verify') {
                document.querySelectorAll('.tab')[1].classList.add('active');
                document.getElementById('verify-form').classList.add('active');
            } else {
                document.querySelectorAll('.tab')[2].classList.add('active');
                document.getElementById('shipments-form').classList.add('active');
            }
        }

        // 显示消息
        function showMessage(elementId, message, isSuccess) {
            const messageEl = document.getElementById(elementId);
            messageEl.textContent = message;
            messageEl.className = `message ${isSuccess ? 'success' : 'error'}`;
            messageEl.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                messageEl.style.display = 'none';
            }, 3000);
        }

        // 显示/隐藏加载状态
        function toggleLoading(loadingId, show) {
            const loadingEl = document.getElementById(loadingId);
            if (show) {
                loadingEl.classList.add('active');
            } else {
                loadingEl.classList.remove('active');
            }
        }

        // 显示结果
        function showResult(resultId, title, data) {
            const resultEl = document.getElementById(resultId);
            const resultTitle = document.createElement('div');
            resultTitle.className = 'result-title';
            resultTitle.textContent = title;
            
            const resultList = document.createElement('ul');
            resultList.className = 'result-list';
            
            if (Array.isArray(data) && data.length > 0) {
                data.forEach(item => {
                    const resultItem = document.createElement('li');
                    resultItem.className = 'result-item';
                    resultItem.textContent = `物流ID: ${item}`;
                    resultList.appendChild(resultItem);
                });
            } else {
                const resultItem = document.createElement('li');
                resultItem.className = 'result-item';
                resultItem.textContent = '没有找到相关物流信息';
                resultList.appendChild(resultItem);
            }
            
            resultEl.innerHTML = '';
            resultEl.appendChild(resultTitle);
            resultEl.appendChild(resultList);
            resultEl.style.display = 'block';
        }

        // 承运商注册
        async function registerCarrier(event) {
            event.preventDefault();
            
            const carrierName = document.getElementById('carrierName').value.trim();
            const carrierInfo = document.getElementById('carrierInfo').value.trim();
            
            if (!carrierName || !carrierInfo) {
                showMessage('register-message', '请输入承运商名称和信息', false);
                return;
            }

            toggleLoading('register-loading', true);

            try {
                const response = await fetch(`${API_BASE_URL}/carrier/add`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `name=${encodeURIComponent(carrierName)}&info=${encodeURIComponent(carrierInfo)}`
                });

                const result = await response.json();

                if (response.ok && result.code === '0') {
                    showMessage('register-message', `承运商 "${carrierName}" 注册成功！`, true);
                    document.getElementById('carrierName').value = '';
                    document.getElementById('carrierInfo').value = '';
                } else {
                    showMessage('register-message', `注册失败：${result.message || '未知错误'}`, false);
                }
            } catch (error) {
                console.error('注册错误:', error);
                showMessage('register-message', '网络错误，请检查服务器连接', false);
            } finally {
                toggleLoading('register-loading', false);
            }
        }

        // 承运商验证
        async function verifyCarrier(event) {
            event.preventDefault();
            
            const carrierId = document.getElementById('carrierId').value.trim();
            
            if (!carrierId) {
                showMessage('verify-message', '请输入承运商ID', false);
                return;
            }

            toggleLoading('verify-loading', true);

            try {
                const response = await fetch(`${API_BASE_URL}/carrier/check`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `id=${encodeURIComponent(carrierId)}`
                });

                const result = await response.json();

                if (response.ok && result.code === '0') {
                    showMessage('verify-message', `承运商ID ${carrierId} 验证成功！承运商存在。`, true);
                } else {
                    showMessage('verify-message', `验证失败：承运商ID ${carrierId} 不存在或验证出错`, false);
                }
            } catch (error) {
                console.error('验证错误:', error);
                showMessage('verify-message', '网络错误，请检查服务器连接', false);
            } finally {
                toggleLoading('verify-loading', false);
            }
        }

        // 查询物流信息
        async function getShipments(event) {
            event.preventDefault();
            
            const carrierId = document.getElementById('shipmentCarrierId').value.trim();
            
            if (!carrierId) {
                showMessage('shipments-message', '请输入承运商ID', false);
                return;
            }

            toggleLoading('shipments-loading', true);

            try {
                const response = await fetch(`${API_BASE_URL}/carrier/getShipments`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `id=${encodeURIComponent(carrierId)}`
                });

                const result = await response.json();

                if (response.ok && result.code === '0') {
                    showMessage('shipments-message', `物流信息查询成功！`, true);
                    showResult('shipments-result', '可操作的物流信息列表：', result.data);
                } else {
                    showMessage('shipments-message', `查询失败：${result.message || '未知错误'}`, false);
                    document.getElementById('shipments-result').style.display = 'none';
                }
            } catch (error) {
                console.error('查询错误:', error);
                showMessage('shipments-message', '网络错误，请检查服务器连接', false);
                document.getElementById('shipments-result').style.display = 'none';
            } finally {
                toggleLoading('shipments-loading', false);
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('承运商管理系统已加载');
        });
    </script>
</body>
</html>